<template>
    <div class="page">
        <div class="scorll">
            <div class="content">
                <p class="topfont">高支模监控系统</p>
                <p>实时监控深基坑各项指标，保障施工安全</p>
                <div class="monitorList">
                    <el-card
                        class="boxcard"
                        v-for="(item, index) in monitorList"
                        :key="index"
                    >
                        <div class="flexbet tit">
                            <span class="black">{{ item.name }}</span>
                            <span
                                class="tag"
                                :class="item.status ? 'yellowbg' : 'greenbg'"
                                >{{ item.status ? "预警" : "正常" }}</span
                            >
                        </div>
                        <div class="flexbet mid">
                            <span
                                ><span class="bigfont">{{
                                    item.realTimeData
                                }}</span
                                >{{ item.unit }}</span
                            >
                            <span>
                                <span>较昨日</span>
                                <span
                                    :class="item.changeStatus ? 'red' : 'green'"
                                >
                                    <i
                                        :class="
                                            item.changeStatus
                                                ? 'el-icon-top'
                                                : 'el-icon-bottom'
                                        "
                                    ></i>
                                    <span
                                        >{{ item.changeData
                                        }}{{ item.unit }}</span
                                    >
                                </span>
                            </span>
                        </div>
                        <div class="flexbet bot">
                            <span
                                >警戒值：{{ item.warningData
                                }}{{ item.unit }}</span
                            >
                            <span>更新时间：{{ item.updateTime }}分钟前</span>
                        </div>
                    </el-card>
                </div>
                <div class="monitorList">
                    <el-card
                        class="boxcard"
                        v-for="(item, index) in totalList"
                        :key="index"
                    >
                        <span class="tit">{{ item.name }}</span>
                        <div class="flexbet mid2">
                            <span class="bigfont"
                                >{{ item.realTimeData }}{{ item.unit }}</span
                            >
                            <div class="iconbox" :class="'iconbg' + index">
                                <img :src="item.iconUrl" class="totalicon" />
                            </div>
                        </div>
                        <span :class="item.changeStatus ? 'green' : 'red'"
                            >较上月
                            <i
                                :class="
                                    item.changeStatus
                                        ? 'el-icon-top'
                                        : 'el-icon-bottom'
                                "
                            ></i>
                            <span>{{ item.changeData }}%</span>
                        </span>
                    </el-card>
                </div>

                <el-row class="mb30" :gutter="20">
                    <el-col :span="12">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">深基坑三维可视化</span>
                                <span class="rightfont black"
                                    ><span class="circle greenbg"></span
                                    >正常<span class="circle yellowbg"></span
                                    >预警<span class="circle redbg"></span
                                    >异常</span
                                >
                            </div>
                            <div class="imgbox">
                                <img
                                    class="bg"
                                    src="../../../static/pit/3D.svg"
                                />
                                <div class="flexbet topcover">
                                    <div class="btngroup">
                                        <div class="iconbtn">
                                            <img
                                                src="../../../static/pit/3D1.png"
                                            />
                                            <div>3D视图</div>
                                        </div>
                                        <div class="iconbtn">
                                            <img
                                                src="../../../static/pit/3D2.png"
                                            />
                                            <div>旋转</div>
                                        </div>
                                        <div class="iconbtn">
                                            <img
                                                src="../../../static/pit/3D3.png"
                                                style="width: 30px"
                                            />
                                            <div>缩放</div>
                                        </div>
                                    </div>
                                    <span class="rbtn">实时监测中</span>
                                </div>
                                <div class="botcover">
                                    <span
                                        ><span class="circle redbg"></span
                                        >东北角位移异常</span
                                    >
                                    <span
                                        ><span class="circle yellowbg"></span
                                        >地下水位下降过快</span
                                    >
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">深基坑位移趋势分析</span>
                                <ul>
                                    <li
                                        v-for="(item, index) in btns"
                                        :key="index"
                                        class="btntag"
                                        :class="
                                            index == active0 ? 'active0' : ''
                                        "
                                        @click="changeActive0(index)"
                                    >
                                        {{ item }}
                                    </li>
                                </ul>
                            </div>
                            <div
                                id="pitTrend"
                                style="width: 100%; height: 380px"
                                class="card"
                            ></div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="mb30" :gutter="20">
                    <el-col :span="9">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">沉降监测</span>
                                <el-select
                                    v-model="subsidencePeriod"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in periodOpt"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div
                                id="subsidenceTrend"
                                style="width: 100%; height: 380px"
                                class="card"
                            ></div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">地下水位监测</span>
                                <el-select
                                    v-model="groundwaterPeriod"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in periodOpt"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div
                                id="groundwaterTrend"
                                style="width: 100%; height: 380px"
                                class="card"
                            ></div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">监测点分布</span>
                                <span
                                    >查看全部 <i class="el-icon-arrow-right"></i
                                ></span>
                            </div>
                            <div class="card" style="width: 100%">
                                <div
                                    id="pointTrend"
                                    style="
                                        width: 80%;
                                        height: 380px;
                                        margin: 0 auto;
                                    "
                                ></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="mb30" :gutter="20">
                    <el-col :span="18">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">监测点实时数据</span>
                                <div class="flexrow">
                                    <el-select
                                        v-model="pointName"
                                        placeholder="请选择"
                                        class="select"
                                    >
                                        <el-option
                                            v-for="item in pointNameOpt"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                    <el-select
                                        v-model="pointLocation"
                                        placeholder="请选择"
                                        class="select"
                                    >
                                        <el-option
                                            v-for="item in pointLocationOpt"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                    <el-button
                                        type="primary"
                                        icon="el-icon-refresh-right"
                                        >刷新数据</el-button
                                    >
                                </div>
                            </div>
                            <el-table
                                :data="realtableData"
                                stripe
                                style="
                                    width: 100%;
                                    height: 330px;
                                    padding: 20px;
                                "
                                class="card"
                            >
                                <el-table-column
                                    prop="id"
                                    label="监测点编号"
                                    width="100"
                                >
                                </el-table-column>
                                <el-table-column prop="lever" label="预警等级">
                                    <template slot-scope="scope">
                                        <el-tag
                                            v-if="scope.row.lever == 0"
                                            type="success"
                                            effect="dark"
                                            style="
                                                width: 70px;
                                                text-align: center;
                                            "
                                            >正常</el-tag
                                        >
                                        <el-tag
                                            v-if="scope.row.lever == 1"
                                            color="#7E87F5"
                                            effect="dark"
                                            >一级预警</el-tag
                                        >
                                        <el-tag
                                            v-if="scope.row.lever == 2"
                                            type="danger"
                                            effect="dark"
                                            >二级预警</el-tag
                                        >
                                        <el-tag
                                            v-if="scope.row.lever == 3"
                                            type="warning"
                                            effect="dark"
                                            >三级预警</el-tag
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column prop="location" label="位置">
                                </el-table-column>
                                <el-table-column prop="name" label="监测项目">
                                </el-table-column>
                                <el-table-column label="当前监测值">
                                    <template slot-scope="scope">
                                        {{
                                            scope.row.realData + scope.row.unit
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="警戒值">
                                    <template slot-scope="scope">
                                        {{
                                            "±" +
                                            scope.row.warningData +
                                            scope.row.unit
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="监测时间"
                                    width="160"
                                >
                                </el-table-column>
                                <el-table-column label="预警状态">
                                    <template slot-scope="scope">
                                        <el-tag
                                            class="tabletag"
                                            effect="dark"
                                            v-if="scope.row.status == 0"
                                            style=""
                                            >正常</el-tag
                                        >
                                        <el-tag
                                            class="tabletag"
                                            effect="dark"
                                            v-else
                                            :type="
                                                scope.row.status == 1
                                                    ? 'warning'
                                                    : 'danger'
                                            "
                                            >{{
                                                scope.row.status == 1
                                                    ? "预警"
                                                    : "异常"
                                            }}</el-tag
                                        >
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <span class="blue">详情</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">预警等级分布</span>
                                <span
                                    >查看全部 <i class="el-icon-arrow-right"></i
                                ></span>
                            </div>
                            <div class="card" style="width: 100%">
                                <div
                                    id="leverTrend"
                                    style="
                                        width: 80%;
                                        height: 330px;
                                        margin: 0 auto;
                                    "
                                ></div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="mb30" :gutter="20">
                    <el-col :span="18">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">预警信息</span>
                                <el-tag type="danger"
                                    >{{ msgNum }}条未处理</el-tag
                                >
                            </div>
                            <div
                                class="card"
                                style="
                                    width: 100%;
                                    height: 380px;
                                    padding: 20px;
                                "
                            >
                                <ul class="msgbox">
                                    <li
                                        v-for="(item, index) in msgList"
                                        :key="index"
                                        :class="'msg' + item.status"
                                    >
                                        <div
                                            class="iconbox"
                                            :class="'bg' + item.status"
                                        >
                                            <img
                                                class="lefticon"
                                                :src="
                                                    '../../../static/pit/msg' +
                                                    item.status +
                                                    '.png'
                                                "
                                            />
                                        </div>

                                        <span class="black bold">{{
                                            item.title
                                        }}</span>
                                        <span class="desc">{{
                                            item.desc
                                        }}</span>
                                        <span class="time">{{
                                            item.time
                                        }}</span>
                                        <span class="blue">处理</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <div class="title flexbet">
                                <span class="bold">设备状态</span>
                                <span
                                    ><i class="el-icon-refresh"></i
                                    >自动刷新</span
                                >
                            </div>
                            <div
                                class="card pad20"
                                style="width: 100%; height: 380px"
                            >
                                <ul class="eqbox">
                                    <li
                                        v-for="(item, index) in eqList"
                                        :key="index"
                                    >
                                        <div
                                            class="iconbox"
                                            :class="'bg' + item.status"
                                        >
                                            <img
                                                class="lefticon"
                                                :src="
                                                    '../../../static/pit/eq' +
                                                    item.status +
                                                    '.png'
                                                "
                                            />
                                        </div>
                                        <div class="desc">
                                            <span class="black bold">{{
                                                item.title
                                            }}</span>
                                            <span class="gray">
                                                <span class="location">{{
                                                    item.location
                                                }}</span>
                                                <span>{{ item.desc }}</span>
                                            </span>
                                        </div>
                                        <span :class="'status' + item.status">{{
                                            item.statusName
                                        }}</span>
                                    </li>
                                </ul>
                                <div class="blockbtn">查看全部设备</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            monitorList: [],
            totalList: [],
            btns: ["日", "周", "月", "年"],
            active0: 0,
            periodOpt: [
                {
                    value: 1,
                    label: "最近24小时",
                },
                {
                    value: 2,
                    label: "最近1周",
                },
                {
                    value: 3,
                    label: "最近1个月",
                },
                {
                    value: 4,
                    label: "最近3个月",
                },
                {
                    value: 5,
                    label: "最近半年",
                },
            ],
            subsidencePeriod: 1,
            groundwaterPeriod: 1,
            pointNameOpt: [
                { value: 1, label: "全部监测项目" },
                {
                    value: 2,
                    label: "位移监测",
                },
            ],
            pointName: 1,
            pointLocationOpt: [
                { value: 1, label: "全部监测位置" },
                {
                    value: 2,
                    label: "男厕基坑边",
                },
            ],
            pointLocation: 1,
            msgNum: 5,
            msgList: [],
            eqList: [],
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.monitorList = [
            {
                name: "水平位移监测",
                status: 0, //0正常 1预警
                realTimeData: 2.3,
                unit: "mm",
                warningData: 5,
                updateTime: 2,
                changeStatus: 0, //0降低 1增长
                changeData: 0.2,
            },
            {
                name: "沉降监测",
                status: 1, //0正常 1预警
                realTimeData: 4.8,
                unit: "mm",
                warningData: 5,
                updateTime: 6,
                changeStatus: 1, //0降低 1增长
                changeData: 0.7,
            },
            {
                name: "地下水位监测",
                status: 0, //0正常 1预警
                realTimeData: 6.2,
                unit: "mm",
                warningData: 8,
                updateTime: 2,
                changeStatus: 0, //0降低 1增长
                changeData: 0.3,
            },
            {
                name: "支撑轴立面监测",
                status: 0, //0正常 1预警
                realTimeData: 2.3,
                unit: "KN",
                warningData: 2500,
                updateTime: 10,
                changeStatus: null, //0降低 1增长
                changeData: 0,
            },
        ];
        this.totalList = [
            {
                name: "监测点总数",
                realTimeData: 128,
                unit: "",
                changeStatus: 1, //0降低 1增长
                changeData: 5.2,
                iconUrl: "../../static/pit/location.png",
            },
            {
                name: "报警总数",
                realTimeData: 23,
                unit: "",
                changeStatus: 0, //0降低 1增长
                changeData: 12.3,
                iconUrl: "../../static/pit/warn.png",
            },
            {
                name: "设备在线率",
                realTimeData: 96.8,
                unit: "%",
                changeStatus: 1, //0降低 1增长
                changeData: 2.1,
                iconUrl: "../../static/pit/wifi.png",
            },
            {
                name: "数据采集量",
                realTimeData: 12.5,
                unit: "K",
                changeStatus: 1, //0降低 1增长
                changeData: 8.2,
                iconUrl: "../../static/pit/data.png",
            },
        ];
        this.pitTrendFn();
        this.subsidenceTrendFn();
        this.groundwaterTrendFn();
        this.pointTrendFn();
        (this.realtableData = [
            {
                id: "JC-001",
                lever: 1,
                location: "东北角连续墙",
                name: "位移监测",
                realData: 3.2,
                unit: "mm",
                warningData: 10,
                time: "2025-05-13 10:00",
                status: 0, //0正常 1预警 2异常
            },
            {
                id: "JC-002",
                lever: 3,
                location: "南边基坑边",
                name: "底下水位监测",
                realData: 5.7,
                unit: "m",
                warningData: 8,
                time: "2025-05-13 09:30",
                status: 2,
            },
            {
                id: "JC-003",
                lever: 3,
                location: "东侧地表",
                name: "沉降监测",
                realData: 2.1,
                unit: "mm",
                warningData: 12,
                time: "2025-05-13 09:00",
                status: 1,
            },
            {
                id: "JC-004",
                lever: 0,
                location: "第3道钢结构",
                name: "支撑轴力监测",
                realData: 1250,
                unit: "KN",
                warningData: 1800,
                time: "2025-05-13 08:00",
                status: 2,
            },
        ]),
            this.leverTrendFn(),
            (this.msgList = [
                {
                    status: 2, ////0正常 1预警 2异常
                    title: "东区地下水位超限",
                    desc: "JC-004 监测点地下水位达到 6.8m，超过警戒值 5m",
                    time: "2025-05-12 12:30",
                },
                {
                    status: 1,
                    title: "北区水平位移接近警戒值",
                    desc: "JC-002 监测点水平位移达到 5.7mm，接近警戒值 8mm",
                    time: "2025-05-12 11:45",
                },
                {
                    status: 1,
                    title: "南区支撑轴力波动异常",
                    desc: "JC-008 监测点支撑轴力波动幅度超过 15%，需关注",
                    time: "2025-05-12 10:20",
                },
                {
                    status: 0,
                    title: "西区沉降已恢复正常",
                    desc: "JC-015 监测点沉降值已恢复到正常范围，警报解除",
                    time: "2025-05-12 09:15",
                },
            ]);
        this.eqList = [
            {
                status: 0,
                statusName: "在线",
                title: "测斜仪-JC-001",
                location: "西侧连续墙",
                desc: "正常运行",
            },
            {
                status: 2,
                statusName: "离线",
                title: "地下水位仪-JC-002",
                location: "南侧基坑边",
                desc: "需要维护",
            },
            {
                status: 1,
                statusName: "信号弱",
                title: "支撑轴力计-JC-003",
                location: "第3道钢支撑",
                desc: "数据有波动",
            },
        ];
    },
    methods: {
        pitTrendFn() {
            let pitTrend = this.$echarts.init(
                document.getElementById("pitTrend")
            );
            pitTrend.setOption({
                color: ["#2093FF", "#45C86C", "#FBDA54"],
                grid: {
                    left: "2%",
                    right: "4%",
                    bottom: "13%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "",
                    },
                    // formatter: "{b0}<br/>{a0}: {c0}个"
                },
                legend: {
                    bottom: "3%",
                    left: "center",
                    itemWidth: 15,
                    itemHeight: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: ["北区沉降(mm)", "南区沉降(mm)", "警戒值(+10mm)"],
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: true,
                        axisLabel: {
                            margin: 10, // 调整标签与刻度线之间的距离
                        },
                        axisTick: {
                            alignWithLabel: true, // 确保标签与刻度线对齐
                        },
                        data: [
                            "00:00",
                            "03:00",
                            "06:00",
                            "09:00",
                            "12:00",
                            "15:00",
                            "18:00",
                            "21:00",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "北区沉降(mm)",
                        type: "line",
                        stack: "Total",
                        areaStyle: {
                            color: "#B9DDFF",
                        },
                        emphasis: {
                            focus: "series",
                        },
                        showSymbol: false,
                        data: [7, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5],
                    },
                    {
                        name: "南区沉降(mm)",
                        type: "line",
                        stack: "Total",
                        areaStyle: {
                            color: "#C0ECCD",
                        },
                        emphasis: {
                            focus: "series",
                        },
                        showSymbol: false,
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17, 16.6],
                    },
                    {
                        name: "警戒值(+10mm)",
                        type: "line",
                        stack: "Total",
                        areaStyle: {
                            color: "#FDEFB8",
                        },
                        emphasis: {
                            focus: "series",
                        },
                        showSymbol: false,
                        data: [8, 9, 15, 3, 1, 56, 12, 6],
                    },
                ],
            });
        },
        changeActive0(index) {
            this.active0 = index;
        },
        subsidenceTrendFn() {
            let subsidenceTrend = this.$echarts.init(
                document.getElementById("subsidenceTrend")
            );
            subsidenceTrend.setOption({
                color: ["#4578F1", "#58D9B4"],
                grid: {
                    left: "6%",
                    right: "4%",
                    bottom: "22%",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    bottom: "7%",
                    left: "center",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: ["今日沉降(mm)", "累计沉降(mm)"],
                },
                xAxis: [
                    {
                        type: "category",
                        axisLabel: {
                            margin: 10, // 调整标签与刻度线之间的距离
                        },
                        axisTick: {
                            alignWithLabel: true, // 确保标签与刻度线对齐
                        },
                        data: [
                            "S01",
                            "S02",
                            "S03",
                            "S04",
                            "S05",
                            "S06",
                            "S07",
                            "S08",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "今日沉降(mm)",
                        type: "bar",
                        emphasis: {
                            focus: "series",
                        },

                        data: [0.3, 0.5, 0.7, 0.9, 0.6, 0.4, 0.2, 0.5],
                    },
                    {
                        name: "累计沉降(mm)",
                        type: "bar",
                        emphasis: {
                            focus: "series",
                        },
                        data: [2.1, 3.5, 4.2, 5.6, 4.8, 3.2, 1.8, 3.5],
                    },
                ],
            });
        },
        groundwaterTrendFn() {
            let groundwaterTrend = this.$echarts.init(
                document.getElementById("groundwaterTrend")
            );
            groundwaterTrend.setOption({
                color: ["#2093FF"],
                grid: {
                    left: "6%",
                    right: "4%",
                    bottom: "22%",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    bottom: "7%",
                    left: "center",
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: ["水位深度(m)"],
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: true,
                        axisLabel: {
                            margin: 10, // 调整标签与刻度线之间的距离
                        },
                        axisTick: {
                            alignWithLabel: true, // 确保标签与刻度线对齐
                        },
                        data: [
                            "00:00",
                            "04:00",
                            "08:00",
                            "12:00",
                            "16:00",
                            "20:00",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "水位深度(m)",
                        type: "line",
                        data: [6.2, 6.5, 6.8, 7.2, 7.8, 8.7],
                        areaStyle: {
                            color: "#B9DDFF",
                        },
                        emphasis: {
                            focus: "series",
                        },
                        showSymbol: false,
                    },
                ],
            });
        },
        pointTrendFn() {
            let pointTrend = this.$echarts.init(
                document.getElementById("pointTrend")
            );
            pointTrend.setOption({
                color: ["#3AA0FF", "#36CBCB", "#4ECB73", "#FAD337", "#F2637B"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "8%",
                    left: "center",
                    itemWidth: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { name: "位移监测(个)", icon: "circle" },
                        { name: "沉降监测(个)", icon: "circle" },
                        { name: "底下水位监测(个)", icon: "circle" },
                        { name: "支撑轴力监测(个)", icon: "circle" },
                        { name: "深层水平位移监测(个)", icon: "circle" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["35%", "60%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 25.0, name: "位移监测(个)" },
                            { value: 21.88, name: "沉降监测(个)" },
                            { value: 18.75, name: "底下水位监测(个)" },
                            { value: 15.63, name: "支撑轴力监测(个)" },
                            { value: 18.75, name: "深层水平位移监测(个)" },
                        ],
                    },
                ],
            });
        },
        leverTrendFn() {
            let leverTrend = this.$echarts.init(
                document.getElementById("leverTrend")
            );
            leverTrend.setOption({
                color: ["#828AF5", "#FDE08C", "#FB8981", "#5ADAB4"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "8%",
                    left: "center",
                    itemWidth: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { icon: "circle", name: "一级预警" },
                        { icon: "circle", name: "二级预警" },
                        { icon: "circle", name: "三级预警" },
                        { icon: "circle", name: "正常" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["60%"],
                        center: ["50%", "45%"],
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },

                        data: [
                            { value: 4.59, name: "一级预警" },
                            { value: 21.1, name: "二级预警" },
                            { value: 11.01, name: "三级预警" },
                            { value: 63.3, name: "正常" },
                        ],
                    },
                ],
            });
        },

        /////////////////////////
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    .content {
        background: #fff;
        padding: 30px;
        font-size: 16px;
        color: #7a7b7c;
        .card {
            border-radius: 10px;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.monitorList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px 0;
    border-radius: 10px;
    .boxcard {
        width: 24%;
        color: #7a7b7c;
        padding: 20px;
        .tit {
            align-items: baseline;
            .tag {
                border-radius: 30px;
                width: 60px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                padding: 3px 0;
            }
        }
        .mid {
            align-items: baseline;
            padding: 20px 0;
            border-bottom: 1px solid #f2f6fc;
        }
        .mid2 {
            align-items: center;
            padding: 20px 0;
            .iconbox {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .totalicon {
                    width: 30px;
                    height: 30px;
                }
            }
            .iconbg0 {
                background: #e7eeff;
            }
            .iconbg1 {
                background: #fff2e5;
            }
            .iconbg2 {
                background: #e5f7e9;
            }
            .iconbg3 {
                background: #e7f9f9;
            }
        }
        .bot {
            font-size: 14px;
            margin-top: 20px;
        }
        .bigfont {
            font-size: 36px;
            color: #000;
            font-weight: 800;
            margin-right: 10px;
        }
    }
}

.item {
    height: 440px;
    .title {
        width: 100%;
        margin-bottom: 20px;
        height: 40px;
        align-items: center;
        .bold {
            color: #000;
            font-size: 20px;
        }
        .rightfont {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
    .imgbox {
        position: relative;
        width: 100%;
        height: 380px;
        .bg {
            width: 100%;
            height: 100%;
        }
        .topcover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            .btngroup {
                display: flex;
                flex-direction: row;
                flex: 1;
                .iconbtn {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    background: rgba(256, 256, 256, 0.5);
                    margin-right: 10px;
                    border-radius: 5px;
                    height: 30px;
                    font-size: 14px;
                    padding: 0 10px;
                    color: #6c6b6b;
                    img {
                        width: 20px;
                        margin-right: 5px;
                    }
                }
            }
            .rbtn {
                background: #2762ef;
                color: #fff;
                border-radius: 5px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                padding: 0 10px;
            }
        }
        .botcover {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            flex-direction: column;
            background: rgba(256, 256, 256, 0.5);
            border-radius: 5px;
            font-size: 14px;
            padding: 12px;
            line-height: 20px;
            color: #333;
        }
    }
}
.msgbox {
    height: 340px;
    overflow: scroll;
    overflow-x: hidden;
    li {
        width: 100%;
        height: 80px;
        padding: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
        border-radius: 10px;
        .iconbox {
            width: 40px;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 20px;
        }
        .lefticon {
            width: 25px;
            height: 25px;
        }
        .black {
            display: inline-block;
            width: 200px;
        }
        .desc {
            flex: 1;
        }
        .time {
            display: inline-block;
            width: 200px;
        }
        .blue {
            display: inline-block;
            padding: 0 30px;
        }
    }
    .msg0 {
        border: 1px solid #c4eecd;
        background: #f2fbf4;
    }
    .msg1 {
        border: 1px solid #ffe0c2;
        background: #fff8f2;
    }
    .msg2 {
        border: 1px solid #fccaca;
        background: #feecec;
    }
    .bg2 {
        background: #fddada;
    }
    .bg1 {
        background: #ffecd9;
    }
    .bg0 {
        background: #d9f3df;
    }
}
.eqbox {
    li {
        width: 100%;
        height: 80px;
        padding: 20px 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        border-radius: 10px;
        background: #f9f9f9;
        .iconbox {
            width: 40px;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }
        .lefticon {
            width: 25px;
            height: 25px;
        }
        .desc {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-left: 10px;
            line-height: 20px;

            .location {
                display: inline-block;
                width: 110px;
            }
        }
    }
    .status0 {
        color: #2cb88e;
    }
    .status1 {
        color: #f0c308;
    }
    .status2 {
        color: red;
    }

    .bg2 {
        background: #fee2e2;
    }
    .bg1 {
        background: #fef9c3;
    }
    .bg0 {
        background: #dbeafe;
    }
    .gray {
        color: #999;
    }
}
.btntag {
    display: inline-block;
    padding: 3px 12px;
    background: #f2f3f5;
    color: #333;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.active0 {
    background: #e7eeff !important;
    color: #2762ef !important;
}

.bold {
    font-weight: 800;
}
.black {
    color: #000;
}
.red {
    color: #fa746b;
}
.green {
    color: #3dd4a7;
}
.blue {
    color: #2762ef;
}
.greenbg {
    background: #3dd4a7;
}
.yellowbg {
    background: #fddb78;
}
.redbg {
    background: #fa746b;
}
.circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 5px;
}
.mb30 {
    margin-bottom: 30px;
}
.blockbtn {
    width: 100%;
    padding: 10px;
    text-align: center;
    border: 1px solid #d3eaff;
    color: #2762ef;
    background: #fff;
    border-radius: 10px;
}
.pad20 {
    padding: 20px;
}
.select {
    margin-right: 10px;
    width: 150px;
}
.tabletag {
    border-radius: 30px;
    width: 55px;
    padding: 0;
    text-align: center;
    height: 28px;
    line-height: 25px;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.topfont {
    color: #000;
    font-weight: 800;
    font-size: 30px;
}
</style>
